<!--
 * @Author: mia.chen mia.chen@webpowerchina.com
 * @Date: 2024-01-18 11:00:01
 * @LastEditors: mia.chen mia.chen@webpowerchina.com
 * @LastEditTime: 2024-01-18 16:00:19
 * @FilePath: \learn-project\src\views\waterfallFlow\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="waterfall">
      <el-form class="queryRef" :inline="true">
          <el-form-item label="设备id" prop="dictLabel">
              <el-input
                      placeholder="请输入设备id"
                      clearable
                      style="width: 200px"
              />
          </el-form-item>
          <el-form-item label="设备名称" style="width: 308px;">
              <el-input
                      placeholder="请输入设备名称"
                      clearable
                      style="width: 200px"
              />
          </el-form-item>
          <el-form-item label="设备状态" style="width: 308px;">
              <el-input
                      placeholder="请输入设备状态"
                      clearable
                      style="width: 200px"
              />
          </el-form-item>
          <el-form-item>
              <el-button type="primary">搜索</el-button>
              <el-button >重置</el-button>
          </el-form-item>
      </el-form>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="设备id" width="200" />
    <el-table-column prop="name" label="设备名称" width="180" />
    <el-table-column prop="status" label="视频质量" />
    <el-table-column prop="mole" label="异常情况" />
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button link type="primary" @click="dialogVisible = true">查看</el-button>
            </template>
        </el-table-column>
  </el-table>
      <div style="text-align: center">
          <el-pagination
                  :page-size="20"
                  :pager-count="10"
                  layout="prev, pager, next"
                  :total="100"
          />
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import  { getEnvListApi } from './interface'
const tableData = [
  {
    id: '679s87467f98762df7488',
    name: '南门设备01',
    status: '异常',
      mole: '接收信号丢失',
  },
  {
    id: '6us772946d51hi273944',
    name: '机房设备02',
    status: '异常',
      mole: '接收信号丢失',
  },
    {
        id: '6us772946d51hi273944',
        name: '东门设备02',
        status: '异常',
        mole: '接收信号丢失',
    },
    {
        id: '6us772946d51hi273944',
        name: '东北角设备01',
        status: '异常',
        mole: '图像黑白',
    },
    {
        id: '6us772946d51hi273944',
        name: '南门设备02',
        status: '正常',
        mole: '图像黑白',
    },
    {
        id: '6us772946d51hi273944',
        name: '机房设备02',
        status: '正常',
        mole: '图像黑白',
    },
    {
        id: '6us772946d51hi273944',
        name: '机房设备02',
        status: '正常',
        mole: '接收信号丢失',
    },
]
const value = ref(true)
</script>

<style scoped>

</style>
